<template>
	<view class="container">
		<input 
			type="text" 
			:value="value"
			v-on="listeners"
			class="input"
		/>
		<button 
			type="primary" 
			size="mini" 
			class="btn"
			@click="$emit('add')"
		>+</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			value:{
				type:String,
				default:''
			}
		},
		computed:{
			/* v-on绑定多个事件的写法 */
			listeners(){
				return{
					...this.$listeners,
					input:event => this.$emit('input',event.target.value)
				}
			}
		}
	}
</script>

<style lang="scss">
.container{
	display: flex;
	padding: 20upx;
	.input{
		flex: 1;
		border: 1upx solid #CCCCCC;
		padding: 0 20upx;
		margin-right: 10upx;
	}
}
</style>
